<template>
   <div class="container">
     <div class="head">
       <span class="san">{{Name}}</span>
      <Input v-model="value" placeholder="请输入..." style="width: 200px" @on-enter="searchCatalog"></Input>
      <span class="san">状态</span>
      <Select style="width:250px" v-model="raio">
                <Option value="启用">启用</Option>
                <Option value="禁用">禁用</Option>
      </Select>
      <Button type="dashed" class="btn" @click="delValur">清除</Button>
      <Button type="primary" class="btn" @click="searchCatalog">搜索</Button>
      <p class="p" v-if="showBack">
       <Icon type="ios-arrow-round-back" color="#6a8cf2" size="20"/>
       <a @click="toBack">返回学科</a>
      </p>
      <Button class="btn" style="float: right;backgroundColor: #67c23a;color: white;" icon="ios-create" @click="addCatalog">新增</Button>
     </div>
  <p class="iconP">
      <Icon type="ios-alert" style="margin-right:5px"/>
      <span>数据一共{{dataObj.counts}}条</span>
  </p>
 </div>
</template>

<script>
export default {
  props: {
    Name: {
      type: String,
      default: '目录名称'
    },
    dataObj: {
      type: Object
    },
    showBack: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: '',
      raio: ''
    }
  },
  methods: {
    delValur () {
      this.value = ''
      this.raio = ''
    },
    searchCatalog () {
      const newArr = []
      if (this.value) {
        this.dataObj.items.map(item => {
          // eslint-disable-next-line no-mixed-operators
          if (item.directoryName === this.value || item.tagName === this.value && item.state === this.raio) {
            newArr.push(item)
          }
        })
        this.dataObj.counts = newArr.length
        this.dataObj.items = newArr
      }
    },
    addCatalog () {
      this.$emit('addCatalog')
    },
    toBack () {
      this.$router.back()
    }
  }
}
</script>

<style scope>
   .san {
    line-height: 30px;
    margin: 15px;
    font-weight: 600;
    }
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .container {
      position: relative;
      background-color: #fff;
    }
    .head {
      padding: 20px 30px;
    }
    .btn{
        margin-left: 15px;
    }
    .iconP {
      height: 40px;
      margin: 10px 20px;
      background-color: #f4f4f5;
      line-height: 40px;
      font-size: 16px;
    }
    .p{
      position: absolute;
      right: 120px;
      top: 25px;
      text-align: center;
    }
</style>
